<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName(
                        '/data-retrieval/index'
                    )"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>全镇检索</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="search-task-container">
            <div class="search">
                <el-input
                    placeholder=""
                    v-model="searchName"
                    @keyup.enter.native="toOne"
                    class="search-input"
                    clearable
                    size="large"
                >
                    <el-button slot="append" @click="toOne"
                        >全 镇 检 索</el-button
                    >
                </el-input>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane name="1">
                    <span slot="label"
                        ><i class="el-icon-postcard"></i> 资源匹配</span
                    >
                    <div class="result">
                        <p class="total">
                            找到相关资源约{{ resultType.total }}个
                        </p>
                        <h4>符合条件的资源类别</h4>
                        <ul class="type" v-if="resultType.types.length">
                            <li v-for="item in resultType.types" :key="item.id">
                                <div @click="handleRouteJump(item)">
                                    <img
                                        :src="$staticUrl + '/' + item.icon"
                                        alt=""
                                    />
                                    <span
                                        v-html="item.name"
                                    ></span>
                                </div>
                            </li>
                        </ul>
                        <ask-empty-text
                            v-else
                            style="background: #fff; height: 160px; padding: 0"
                        ></ask-empty-text>
                        <h4>符合条件的资源内容</h4>
                        <ul class="item" v-if="resultType.fields.length">
                            <li
                                v-for="item in resultType.fields"
                                :key="item.id"
                            >
                                <p @click="handleRouteJump(item)">
                                    <span>{{ item.name }}</span>
                                    <font>({{ item.matches.length }}):</font>
                                    <em
                                        :title="title(item.matches)"
                                        v-html="item.matches"
                                    ></em>
                                </p>
                                <div class="info">
                                    <div
                                        class="left"
                                        @click="handleRouteJump(item)"
                                    >
                                        <img
                                            :src="$staticUrl + '/' + item.icon"
                                            alt=""
                                        />
                                        <span>{{ item.dataCount }}条数据</span>
                                    </div>
                                    <div class="right">
                                        <span>本资源信息：</span>
                                        <span>{{
                                            item.basicList
                                                .slice(0, 5)
                                                .join("、")
                                        }}</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ask-empty-text
                            v-else
                            style="background: #fff; height: 200px; padding: 0"
                        ></ask-empty-text>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="2">
                    <span slot="label"
                        ><i class="el-icon-help"></i> 采集任务匹配</span
                    >
                    <div class="content">
                        <ul>
                            <li v-for="(item, index) in NewList" :key="index">
                                <div class="day">
                                    <div class="day-time">
                                        <div class="left">
                                            <p v-if="item.today" class="today">
                                                今天
                                            </p>
                                            <p class="time">
                                                {{
                                                    new Date(item.time).format(
                                                        "yyyy年MM月dd日"
                                                    )
                                                }}
                                            </p>
                                        </div>
                                        <div
                                            class="right"
                                            @click="expandDay(index)"
                                        >
                                            <i
                                                :class="
                                                    item.expand
                                                        ? 'el-icon-caret-top'
                                                        : 'el-icon-caret-bottom'
                                                "
                                            ></i>
                                        </div>
                                    </div>
                                    <el-timeline>
                                        <el-timeline-item
                                            v-for="(
                                                activity, i
                                            ) in item.list.slice(
                                                0,
                                                item.expand
                                                    ? item.list.length
                                                    : 1
                                            )"
                                            :key="i"
                                            placement="bottom"
                                        >
                                            <div @click="toTaskList(activity)">
                                                <div>
                                                <span
                                                    class="form-name"
                                                    v-html="activity.name"
                                                ></span>
                                                    <div class="wrap">
                                                    <span class="creator"
                                                    >采集数量{{
                                                            activity.count || 0
                                                        }}</span
                                                    >
                                                        <span class="creator"
                                                        >{{
                                                                activity.departName
                                                            }}/{{
                                                                activity.collector
                                                            }}</span
                                                        >
                                                    </div>
                                                    <span class="time-min">{{
                                                            new Date(
                                                                activity.createTime
                                                            ).format("hh:mm:ss")
                                                        }}</span>
                                                </div>
                                                <ul v-if="activity.matchItem">
                                                    <li class="first">
                                                        字段匹配：
                                                    </li>
                                                    <li
                                                        v-for="(
                                                        sub, index
                                                    ) in activity.matchItemNameList"
                                                        :key="index"
                                                        v-html="sub"
                                                    ></li>
                                                </ul>
                                                <ul v-if="activity.matchData">
                                                    <li class="first">
                                                        数据匹配：
                                                    </li>
                                                    <li class="num">
                                                        有{{
                                                            activity.dataCount
                                                        }}条数据匹配
                                                    </li>
                                                </ul>
                                            </div>
                                        </el-timeline-item>
                                    </el-timeline>
                                </div>
                            </li>
                        </ul>
                        <ask-empty-text
                            style="min-height: 300px"
                            v-if="NewList.length === 0"
                        ></ask-empty-text>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <template v-slot:footer v-if="total > 0 && activeName === '2'">
            <pagination
                :total="total"
                :page.sync="pageIndex"
                :limit.sync="pageSize"
                @pagination="handleSearch"
            />
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface ResultType {
    fields: any[];
    types: any[];
    total: number;
}
@Component({
    name: "SearchTask"
})
export default class SearchTask extends Vue {
    searchName: any = "";
    list: any[] = [];
    NewList: any[] = [];
    total = 0;
    pageIndex = 1;
    pageSize = 10;
    activeName = "1";
    resultType: ResultType = {
        fields: [],
        types: [],
        total: 0
    };

    beforeRouteEnter(to: any, from: any, next: any) {
        if (from.name === "DataRetrievalIndex" || from.name === "home") {
            next((vm: any) => {
                vm.searchName = to.query.name;
                vm.activeName = "1";
                if (vm.searchName) {
                    vm.handleByType();
                } else {
                    vm.resultType = {
                        fields: [],
                        types: [],
                        total: 0
                    };
                }
            });
        } else {
            next();
        }
    }

    created() {
        this.searchName = this.$route.query.name || "";
        if (this.searchName) {
            this.handleByType();
        }
    }

    activated() {
        const Dom: any = document.querySelector(".page-base-body");
        if (this.activeName === "1") {
            Dom.style.height = "calc(100% - 50px)";
        } else {
            Dom.style.height = "calc(100% - 122px)";
        }
    }

    mounted() {
        const Dom: any = document.querySelector(".page-base-body");
        if (this.activeName === "1") {
            Dom.style.height = "calc(100% - 50px)";
        } else {
            Dom.style.height = "calc(100% - 122px)";
        }
    }

    toOne() {
        this.pageIndex = 1;
        if (this.activeName === "1") {
            if (!this.searchName) {
                return this.$message.warning("请输入关键字搜索");
            }
            this.handleByType();
        } else {
            this.handleSearch();
        }
    }

    async handleSearch() {
        const result = await this.$server["search/list"]({
            data: {
                currentPage: this.pageIndex,
                pageSize: this.pageSize,
                keyword: this.searchName
            }
        });
        if (result.data.code === 200) {
            this.list = result.data.data.records;
            this.total = result.data.data.total;

            const arr: any[] = [];
            const setList = this.list[0];
            if (setList) {
                Object.entries(setList).forEach((item: any) => {
                    arr.push({
                        time: item[0],
                        list: item[1],
                        today:
                            new Date(item[0]).format("yyyy-MM-dd") ===
                            new Date().format("yyyy-MM-dd"),
                        expand: true
                    });
                });
            }
            const re = new RegExp(this.searchName, "g");
            arr.forEach((item: any) => {
                item.list.forEach((sub: any) => {
                    if (
                        sub.name.indexOf(this.searchName) !== -1 &&
                        this.searchName !== ""
                    ) {
                        sub.name =
                            "【" +
                            sub.name.replace(
                                re,
                                '<font color="#de2728">' +
                                    this.searchName +
                                    "</font>"
                            ) +
                            "】";
                    } else {
                        sub.name = "【" + sub.name + "】";
                    }
                    if (sub.matchItemNameList) {
                        sub.matchItemNameList = sub.matchItemNameList.map(
                            (subItem: any) => {
                                if (
                                    subItem.indexOf(this.searchName) !== -1 &&
                                    this.searchName !== ""
                                ) {
                                    return (subItem = subItem.replace(
                                        re,
                                        '<font color="#de2728">' +
                                            this.searchName +
                                            "</font>"
                                    ));
                                } else {
                                    return subItem;
                                }
                            }
                        );
                    }
                });
            });
            this.NewList = arr;
        }
    }

    async handleByType() {
        const res = await this.$server["search/listByType"]({
            data: {
                keyword: this.searchName
            }
        });
        if (res.data.code === 200 && res.data.data) {
            const re = new RegExp(this.searchName, "g");
            this.resultType.fields = res.data.data.fields || [];
            this.resultType.types = res.data.data.types || [];
            this.resultType.total = res.data.data.total || 0;
            this.resultType.fields.forEach((item: any) => {
                item.matches = item.matches.join("、");
                if (
                    item.matches.indexOf(this.searchName) !== -1 &&
                    this.searchName !== ""
                ) {
                    item.matches = item.matches.replace(
                        re,
                        '<font color="#de2728">' + this.searchName + "</font>"
                    );
                }
            });
            this.resultType.types.forEach((item: any) => {
                if (
                    item.name.indexOf(this.searchName) !== -1 &&
                    this.searchName !== ""
                ) {
                    item.name = item.name.replace(
                        re,
                        '<font color="#de2728">' + this.searchName + "</font>"
                    );
                }
            });
        }
    }

    title(str: string) {
        str = str.replace(/<.*?>/gi, "");
        return str;
    }

    toTaskList(data: any) {
        this.$router.push({
            name: "TaskList",
            query: {
                name: data.name.replace(/<.*?>/gi, "").replace("【", "").replace("】", ""),
                fillType: data.fillType,
                formId: data.formId,
                processInstId: data.processInstId,
                keyword: this.searchName,
                matchItem: data.matchItem,
                matchData: data.matchData,
                matchForm: data.matchForm
            }
        });
    }

    expandDay(index: number) {
        this.NewList[index].expand = !this.NewList[index].expand;
    }

    handleClick() {
        const Dom: any = document.querySelector(".page-base-body");
        if (this.activeName === "1") {
            Dom.style.height = "calc(100% - 50px)";
            if (!this.searchName) {
                return false;
            }
            this.handleByType();
        } else {
            Dom.style.height = "calc(100% - 122px)";
            this.handleSearch();
        }
    }

    handleRouteJump(item: any) {
        this.$router.push({
            name: "DataRetrievalList",
            query: {
                typeId: item.id,
                field: item.field,
                title: `${item.parentName}/${item.name}`
            }
        });
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 50px);
    }
}
.search-task-container {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .search {
        width: 100%;
        padding: 10px 0 0;
        @include flexLayout(flex, center, normal);
    }
    .search-input {
        width: 1120px;
        .icon-search {
            font-size: 30px;
        }
        ::v-deep {
            .el-input__inner {
                &:focus {
                    border-color: #dcdfe6;
                }
            }
            .el-input-group__prepend {
                background: transparent;
            }
            .el-input-group__append {
                background: #2c82c9;
                color: #fff;
                border-color: #2c82c9;
                .el-button {
                    background: #2c82c9;
                    border-color: #2c82c9;
                    &:hover {
                        background: #2c82c9;
                        color: #fff;
                        border-color: #2c82c9;
                    }
                }
            }
        }
    }
    .content {
        @include flexLayout(flex, center, normal);
        padding-top: 40px;
        .day {
            @include flexLayout(flex, normal, normal);
            margin-bottom: 20px;
            .day-time {
                @include flexLayout(flex, center, center);
                width: 240px;
                height: 80px;
                border: 1px solid #dcdfe6;
                position: relative;
                margin-right: 40px;
                border-radius: 4px;
                &:after {
                    content: "";
                    display: block;
                    width: 40px;
                    height: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    right: -41px;
                    top: 40px;
                }
                .left {
                    .today {
                        font-size: 16px;
                        margin: 0 0 6px 0;
                    }
                    .time {
                        margin: 0;
                        font-size: 14px;
                        text-align: center;
                    }
                }
                .right {
                    padding: 4px 8px;
                    background: #eaf2fc;
                    color: #2c82c9;
                    font-size: 22px;
                    border-radius: 4px;
                    margin-left: 20px;
                    cursor: pointer;
                }
            }
            ::v-deep {
                .el-timeline {
                    width: 840px;
                    padding-left: 100px;
                    padding-top: 30px;
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                }
                .el-timeline-item__content {
                    display: flex;
                    flex-direction: column;
                    cursor: pointer;
                    & > div {
                        & > div {
                            display: flex;
                            justify-content: space-between;
                        }
                        & > p {
                            margin: 0;
                            height: 40px;
                            font-size: 14px;
                            line-height: 40px;
                            padding-left: 10px;
                            color: rgb(88, 165, 92);
                        }
                    }
                    &:hover {
                        .form-name {
                            color: #2c82c9;
                            border-bottom: 1px solid #2c82c9;
                        }
                        .creator {
                            color: #2c82c9;
                            border-bottom: 1px solid #2c82c9;
                        }
                    }
                    .form-name {
                        color: #37383a;
                        border-bottom: 1px solid transparent;
                        @include textEllipsis();
                        max-width: 40%;
                    }
                    .wrap {
                        width: 50%;
                        display: flex;
                        justify-content: space-between;
                        padding-right: 6px;
                    }
                    .creator {
                        text-align: right;
                        color: #b1aeae;
                        border-bottom: 1px solid transparent;
                        @include textEllipsis();
                    }
                    ul {
                        display: flex;
                        flex-wrap: wrap;
                        margin-top: 10px;
                        li {
                            font-size: 14px;
                            margin-right: 16px;
                            margin-bottom: 10px;
                        }
                        .first {
                            margin: 0;
                            color: rgb(88, 165, 92);
                        }
                        .num {
                            color: rgb(222, 39, 40);
                        }
                    }
                }
            }
            .time-min {
                position: absolute;
                top: 0;
                left: -70px;
            }
        }
    }
    .el-tabs {
        width: 1120px;
        ::v-deep {
            .el-tabs__nav-wrap {
                &::after {
                    display: none !important;
                }
                .el-tabs__item.is-active {
                    color: #303133;
                }
            }
        }
    }
    .result {
        p {
            margin: 0;
        }
        .total {
            font-size: 13px;
            line-height: 18px;
            color: #9195a3;
        }
        h4 {
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            line-height: 25px;
            color: #37383a;
            margin: 0;
            margin-top: 10px;
            position: relative;
            padding-left: 8px;
            &::after {
                content: "";
                width: 4px;
                height: 20px;
                background: #de2728;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        .type {
            display: flex;
            flex-wrap: wrap;
            padding: 16px 0;
            background-color: #f5f5f6;
            margin-top: 12px;
            margin-bottom: 20px;
            border-radius: 6px;
            li {
                width: 20%;
                padding: 0 60px;
                div {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    cursor: pointer;
                    img {
                        width: 37px;
                        height: 43px;
                    }
                    span {
                        line-height: 20px;
                        color: #37383a;
                        font-weight: bold;
                        font-size: 14px;
                        margin-top: 4px;
                    }
                }
                &:nth-child(n + 6) {
                    margin-top: 16px;
                }
            }
        }
    }
    .item {
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;
        li {
            margin-top: 20px;
            p {
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 600;
                line-height: 25px;
                display: flex;
                align-items: center;
                cursor: pointer;
                span {
                    color: #2c82c9;
                    width: 180px;
                    flex-grow: 0;
                    flex-shrink: 0;
                    overflow: hidden;
                    white-space: nowrap;
                }
                font {
                    color: #37383a;
                    margin-left: 10px;
                }
                em {
                    font-style: normal;
                    color: #37383a;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
        .info {
            display: flex;
            margin-top: 10px;
            .left {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100px;
                height: 80px;
                background: #f5f5f6;
                border-radius: 6px;
                cursor: pointer;
                img {
                    width: 37px;
                    height: 43px;
                }
                span {
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    line-height: 17px;
                    color: #37383a;
                }
            }
            .right {
                margin-left: 90px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 12px 0;
                span {
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    line-height: 18px;
                    color: #6a6666;
                }
            }
        }
    }
}
</style>
